<div class="box-container">
    <div class="main-content">
        <div class="content-body">
            <div class="content-top-bar">
                <div>
                    <div>
                        日期：
                        <nz-date-picker [ngModel]="today" nzDisabled></nz-date-picker>
                    </div>
                    <div class="table-btn-group">
                        <button nz-button nzType="primary" (click)="submit()">提交</button>
                        <button nz-button nzType="default" (click)="save()">暂存</button>
                    </div>
                </div>

                <div class="custom-btn-group">
                    <a class="top-bar-btn" (click)="openDetailModal()">
                        <i nz-icon nzType="history" nzTheme="outline"></i> 历史记录
                    </a>
                    <a class="top-bar-btn" (click)="export()">
                        <i nz-icon nzType="file-excel" nzTheme="outline"></i> 导出
                    </a>
                    <!--<a class="top-bar-btn" (click)="print()">-->
                        <!--<i nz-icon nzType="printer" nzTheme="outline"></i>-->
                    <!--</a>-->
                </div>
            </div>
            <div class="main-content-body">
                <div style="width: 33%">
                    <nz-table
                        class="main-table"
                        #groupingTable
                        [nzData]="tableData"
                        nzBordered
                        [nzFrontPagination]="false"
                        nzSize="middle"
                    >
                        <thead>
                        <tr class="custom-head">
                            <th colspan="2">名称</th>
                            <th>当日补水量（万m³）</th>
                            <th>累计补水量（万m³）</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr *ngFor="let data of groupingTable.data;index as i"
                            [class]="{'even': i% 2 === 1}"
                            (click)="getChartData(data)">
                            <td [attr.rowspan]="calcRowspan(i, data.prId)" *ngIf="isTdShow(i, data.prId)"
                                [attr.colspan]="calcColspan(i, data.prId)">{{data.prName}}</td>
                            <td *ngIf="isColTdShow(i, data.prId)">{{data.rrName}}</td>
                            <td>
                              <div class="editable-cell" [hidden]="editCache[data.trLwId].edit" (click)="startEdit(data.trLwId, $event)">
                                {{ data.val }}
                              </div>
                              <input [hidden]="!editCache[data.trLwId].edit" type="text" nz-input [(ngModel)]="data.val" (blur)="stopEdit(data.prId)" />
                                <!--<div class="editable-cell" *ngIf="!editCache[data.trLwId].edit; else editRow1">-->
                                    <!--<div class="editable-cell-value-wrap" (click)="startEdit(data.trLwId, $event)">-->
                                        <!--{{ data.val }}-->
                                    <!--</div>-->
                                <!--</div>-->
                                <!--<ng-template #editRow1>-->
                                    <!--<input type="text" nz-input [(ngModel)]="data.val" (blur)="stopEdit(data.prId)"/>-->
                                <!--</ng-template>-->
                            </td>
                            <td>
                              {{ data.valTotal }}
                            </td>
                        </tr>
                        </tbody>
                    </nz-table>
                </div>
                <div class="half-width-wrap">
                    <div echarts [options]="basicOpt"
                         [merge]="lakeOptChange"
                         (chartInit)="lakeChartInit($event)"
                        style="height: 500px">
                </div>
            </div>
        </div>
    </div>
</div>

<nz-modal class="custom-modal" [(nzVisible)]="modalShow" [nzTitle]="modalTitle"
          (nzOnCancel)="onCancel()" (nzOnOk)="onCancel()" nzWidth="900">
    <div style="margin-bottom: 10px">
        <nz-range-picker [ngModel]="range" (ngModelChange)="onRangeChange($event)"></nz-range-picker>
        <nz-radio-group [nzButtonStyle]="'solid'" [(ngModel)]="quickTimeSelect" (ngModelChange)="quickSelect()"
                        style="margin-left: 15px">
            <label nz-radio-button nzValue="7">近7日</label>
            <label nz-radio-button nzValue="15">近15日</label>
            <label nz-radio-button nzValue="30">近30日</label>
        </nz-radio-group>
    </div>

    <div>
        <nz-table
            #groupingTable1
            [nzData]="historyData"
            nzBordered
            nzSize="middle"
        >
            <thead>
            <tr>
                <th style="width: 140px;" rowspan="2">日期</th>
                <th *ngFor="let key of objectKeys(modalFirstHead)" [colSpan]="modalFirstHead[key].length"
                    [rowSpan]="isHeadRowSpan(key) ? 2 : 1">{{key}}</th>
            </tr>
            <tr>
                <ng-container *ngFor="let key of objectKeys(modalFirstHead)">
                    <ng-container *ngIf="!isHeadRowSpan(key)">
                        <th *ngFor="let subItem of modalFirstHead[key]">{{subItem.rrName}}</th>
                    </ng-container>
                </ng-container>
            </tr>
            </thead>
            <tbody>
            <tr *ngFor="let data of groupingTable1.data;index as i">
                <td>{{ data.date }}</td>
                <td *ngFor="let item of data.datas">{{ item.val }}</td>
            </tr>
            </tbody>
        </nz-table>
    </div>

</nz-modal>
